<template>
  <div class="page">
    <div class="top">
      <div class="icon">
        <div class="left">
          <img src="../assets/icon/zhixiangzuo.svg" alt="" class="toLeft" />
        </div>
        <div class="middle">
          <span>ETH 質押</span>
        </div>
        <div class="right">
          <img src="../assets/icon/lishidingdan.svg" alt="" />
          <img src="../assets/icon/wentiguanli.svg" alt="" class="wenti" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="zq">
        <div class="left">賺取每日收益並連用您的質押資產</div>
        <div class="right">
          <img src="../assets/icon/yitaifang.svg" alt="" />
        </div>
      </div>
      <div class="what">什麼是 WBETH</div>
      <div class="cank">
        參考 APR
        <img src="../assets/icon/a-fund-fillgupiao-mianxing.svg" alt="" />
      </div>
      <div class="num">2.68%</div>
      <div class="btnBox">
        <div class="btn" @click="setShowBottom(true)">贖回</div>
        <div class="btn active" @click="setShowBottom(true)">質押 ETH</div>
      </div>

      <div class="bz">
        <div class="title">3 步驟開始賺幣</div>
        <div class="bzt">
          <div class="left">
            <div class="box"><span>1</span></div>
            <div class="line"></div>
            <div class="box"><span>2</span></div>
            <div class="line two"></div>
            <div class="box"><span>3</span></div>
          </div>
          <div class="right">
            <div class="text" style="margin-bottom: 33px">
              <div class="label">質押 ETH</div>
              <div class="msg">
                質押 ETH 並收取作為質押 ETH 代幣化資產的 WBETH。
              </div>
            </div>
            <div class="text" style="margin-bottom: 28px">
              <div class="label">賺取每日獎勵</div>
              <div class="msg">
                持有 WBETH 賺取收益，或將 WBETH 連用於多個應用案例。隨著 ETH
                質押獎勵不斷積累，1 WBETH 的價值會逐漸超過 1 ETH - 目前為：
                <div>
                  <span>1 WBETH</span> ≈ <span>1.02989252 ETH</span>
                  <img src="../assets/icon/jiaohuan2.svg" alt="" />
                </div>
              </div>
            </div>
            <div class="text">
              <div class="label">
                贖回 ETH 的彈性
                <img src="../assets/icon/htmal5icon28.svg" alt="" />
              </div>
              <div class="msg">將 WBETH 贖回為 ETH。</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bian">
        <div class="title">幣安為您設想周全</div>
        <div class="ite">
          <img src="../assets/icon/charulianjie.svg" alt="" />
          僅 0.0001 ETH 即可開始
        </div>
        <div class="ite">
          <img src="../assets/icon/charulianjie.svg" alt="" />
          幣安承擔沒罰款
        </div>
        <div class="ite">
          <img src="../assets/icon/charulianjie.svg" alt="" />
          彈性出場政策
        </div>
      </div>
    </div>

    <div class="zz" @click="setShowBottom(false)" v-if="isShowBottom"></div>
    <div class="bottom" v-if="isShowBottom">
      <div class="centerLine"></div>
      <div class="title">兌換比率興 APR 記錄</div>

      <div class="time">2024-02-04</div>
      <div class="num">3.19%</div>
      <div class="hl">1 WBETH ≈ 1.02989252 ETH</div>
      <div class="jt">
        <div :class="{ active: time == '7' }" @click="setType('7')">
          最近7天
        </div>
        <div :class="{ active: time == '30' }" @click="setType('30')">
          近30天
        </div>
        <div :class="{ active: time == '90' }" @click="setType('90')">
          近90天
        </div>
      </div>
      <div id="echarth"></div>
      <div class="xs">顯示的 APR 是根據 2 天前鏈上產生的殖利率計算。</div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'oneThree',
  data() {
    return { time: '7', isShowBottom: false }
  },
  methods: {
    setType(type) {
      this.time = type
    },
    setShowBottom(type) {
      this.isShowBottom = type
      if (type) {
        this.$nextTick(function () {
          let chartDom = document.getElementById('echarth')
          var myChart = echarts.init(chartDom)
          var option

          option = {
            grid: {
              containLabel: true,
              y: 30,
              x: 10,
              x2: 20,
              y2: 30
            },
            xAxis: {
              type: 'category',
              data: ['01-29', '02-04'],
              axisLabel: {},
              boundaryGap: false
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: function (value) {
                  console.log(value, 'value')
                  return value.toFixed(2) + '%' // 保留两位小数
                }
              }
            },
            series: [
              {
                data: [1.0, 1.027038],
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                  width: 0
                },
                showSymbol: false,
                areaStyle: {
                  opacity: 0.8,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgb(94, 86, 40)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(47, 50, 55)'
                    }
                  ])
                },
                emphasis: {
                  focus: 'series'
                },
                itemStyle: {
                  normal: {
                    color: '#c7a63d',
                    lineStyle: {
                      color: '#c7a63d'
                    }
                  }
                }
              }
            ]
          }

          option && myChart.setOption(option)
        })
      }
    }
  },
  mounted() {}
}
</script>

<style scoped>
.bottom .xs {
  color: #737a83;
  font-size: 12px;
}
.bottom #echarth {
  height: 200px;
}
.bottom .jt {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.bottom .jt div {
  font-size: 12px;
  color: #737a83;
  margin-right: 20px;
}
.bottom .jt div.active {
  color: #e4eaf0;
  background-color: #37414e;
  padding: 3px;
  border-radius: 3px;
}
.bottom .time,
.bottom .hl {
  font-size: 10px;
  color: #737a83;
}
.bottom .num {
  color: #65ba92;
  font-size: 18px;
  margin: 5px 0;
}
.zz {
  height: 100%;
  width: 100%;
  background-color: #1b1d23c9;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.bottom .centerLine {
  width: 30px;
  height: 3px;
  background-color: #444b5d;
  border-radius: 2px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 5px 0;
}
.bottom .title {
  color: #e4eaf0;
  margin: 10px 0 25px 0;
}
.bottom {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 20px 30px 20px;
  background-color: #242c37;
  border-radius: 10px 10px 0 0;
  z-index: 4;
}
.bian {
  margin-top: 30px;
  color: #e4eaf0;
}
.bian img {
  width: 20px;
  margin-right: 5px;
}
.bian .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.bian .ite {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.bz .right .label {
  color: #e4eaf0;
  display: flex;
  align-items: center;
}
.bz .right img {
  width: 15px;
}
.bz .right .msg {
  color: #757c85;
  font-size: 12px;
}
.bz .right img {
  margin-left: 5px;
}
.bz .right .msg div span {
  background-color: #333b48;
  color: #e4eaf0;
  border-radius: 3px;
  padding: 3px 5px;
}
.bz .right .msg div {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.bz {
  margin-top: 30px;
}
.bz .title {
  color: #e4eaf0;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.bz .bzt {
  display: flex;
}
.bz .bzt .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
}
.bz .bzt .left .line {
  width: 2px;
  height: 50px;
  background-color: #eaeff6;
}
.bz .bzt .left .line.two {
  height: 100px;
}
.bz .bzt .box span {
  transform: rotate(-45deg);
  display: inline-block;
}
.bz .bzt .box {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 3px;
  text-align: center;
  transform: rotate(45deg);
  background-color: #eaeff6;
  color: #363c45;
}
.content > .num {
  color: #65ba92;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 20px 0;
}
.btnBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btnBox .btn {
  width: 48%;
  background-color: #2e313a;
  color: #e4eaf0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
}

.btnBox .btn.active {
  background-color: #f3d650;
  color: #1b1d23;
}
.cank {
  display: flex;
  align-items: center;
  color: #e4eaf0;
}
.cank img {
  width: 15px;
  margin-left: 5px;
}
.what {
  color: #f3d650;
  margin: 20px 0;
}
.zq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #e4eaf0;
  font-size: 20px;
  margin-top: 20px;
}
.zq img {
  margin-left: 6px;
  width: 50px;
}
.content {
  position: relative;
  height: calc(100% - 50px);
}

.page {
  background-color: #21262f;
  padding: 0 20px;
  padding-bottom: 20px;
}
.top {
}
.top img {
  width: 20px;
}
.top .icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  color: #fff;
}
.top .icon .middle {
  display: flex;
  align-items: center;
}
.top .icon .middle img {
  margin-right: 5px;
}
.wenti {
  margin-left: 20px;
}
</style>
